<template>
  <div class="vote_wrap safe">
    <van-list
      v-model="listConfig.loading"
      :finished="listConfig.finished"
      finished-text=""
      @load="getList"
      :offset="0"
      :immediate-check="false"
    >
      <div class="banner_wrap">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in ad.bannerLink" :key="index">
            <div class="banner_item">
              <van-image fit="cover" :src="item.link" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="vote_info_wrap">
        <div class="info_title">
          {{ voteInfo.title }}
        </div>
        <div class="count_wrap">
          <div
            class="count_item"
            v-if="page.countComponent && page.countComponent.element.VC"
            :style="{
              color: basic.theme || cfg.theme,
              borderLeft: '1px solid ' + basic.theme || cfg.theme,
            }"
          >
            <span class="num">{{ voteInfo.vc + voteInfo.phonyVc }}</span>
            <span class="name">总{{ voteInfo.unit }}数</span>
          </div>
          <div
            class="count_item"
            v-if="
              page.countComponent &&
              page.countComponent.element.CONTESTANT_COUNT
            "
            :style="{
              color: basic.theme || cfg.theme,
              borderLeft: '1px solid ' + basic.theme || cfg.theme,
            }"
          >
            <span class="num">{{ voteInfo.cc1 }}</span>
            <span class="name">{{ voteInfo.contestantCategory + "数" }}</span>
          </div>
          <div
            class="count_item"
            v-if="page.countComponent && page.countComponent.element.PV"
            :style="{
              color: basic.theme || cfg.theme,
              borderLeft: '1px solid ' + basic.theme || cfg.theme,
            }"
          >
            <span class="num">{{ voteInfo.pv + voteInfo.phonyPv }}</span>
            <span class="name">访问量</span>
          </div>
        </div>
        <!-- <van-row class="count_wrap">
          <van-col
            :span="countCol"
            class="count_item"
            v-for="(item, index) in contestantCountList"
            :key="index"
            :style="{
              color: basic.theme || cfg.theme,
              borderLeft: '1px solid ' + basic.theme || cfg.theme,
            }"
          >
            <div class="item_box">
 >
              <span class="num">{{
                item.value == "CONTESTANT_COUNT"
                  ? voteInfo.cc1 || 0
                  : voteInfo[item.value.toLowerCase()]
              }}</span>
              <span class="name">{{
                item.value === "CONTESTANT_COUNT"
                  ? voteInfo.contestantCategory + "数"
                  : item.name
              }}</span>
            </div>
          </van-col>
        </van-row> -->
        <div class="time_wrap">
          <div class="time_box">
            <div class="time_title">距离投票结束</div>
            <div class="time_details">
              <van-count-down :time="time">
                <template #default="timeData">
                  <span
                    class="num"
                    :style="{ background: basic.theme || cfg.theme }"
                    >{{ timeData.days }}</span
                  >
                  <span class="text">天</span>
                  <span
                    class="num"
                    :style="{ background: basic.theme || cfg.theme }"
                    >{{ timeData.hours }}</span
                  >
                  <span class="text">时</span>
                  <span
                    class="num"
                    :style="{ background: basic.theme || cfg.theme }"
                    >{{ timeData.minutes }}</span
                  >
                  <span class="text">分</span>
                  <span
                    class="num"
                    :style="{ background: basic.theme || cfg.theme }"
                    >{{ timeData.seconds }}</span
                  >
                  <span class="text">秒</span>
                </template>
              </van-count-down>
            </div>
          </div>
          <div
            class="logo_count"
            :style="{
              background: basic.theme || cfg.theme,
            }"
            @click="handleTo"
          >
            <van-image
              fit="cover"
              :src="require('../../assets/images/count_09.png')"
            />
          </div>
        </div>
      </div>
      <div class="vote_info_wrap">
        <div class="regular_title">活动规则</div>
        <div class="regular_item">
          <van-icon :color='basic.theme || cfg.theme' name="underway-o" />
          <span>投票开始：{{voteInfo.beginTime}}</span>
        </div>
        <div class="regular_item">
          <van-icon :color='basic.theme || cfg.theme' name="underway-o" />
          <span>投票截止：{{voteInfo.endTime}}</span>
        </div>
        <div class="regular_item">
          <van-icon :color='basic.theme || cfg.theme' name="underway-o" />
          <span>投票规则：
            <template v-if="rule.period == 'FIXED_FREQUENCY'">
              每个微信号活动期间可投票{{rule.periodFixedTimes}}次
            </template>
            <template v-if="rule.period == 'EVERY_DAY_FREQUENCY'">
              每个微信号每天可投票{{rule.periodEveryDayFixedTimes}}次
            </template>
            <template v-if="rule.type == 'MULTIPLE_CHOICE'">
              最少选择{{rule.typeMultipleChoiceMinValue}}个选手，
              最多选择{{rule.typeMultipleChoiceMaxValue}}个选手
            </template>
            <template v-if="rule.type == 'REQUIRED_CHOICE'">
              必须选择{{rule.typeRequiredChoiceValue}}个选手
            </template>
          </span>
        </div>
      </div>
      <div class="search_wrap">
        <div class="search">
          <van-search
            v-model="key"
            background="transparent"
            shape="round"
            placeholder="请输入搜索关键词"
            @search="handleSearch"
            @clear="handleClear"
          />
          <van-button
            round
            type="info"
            @click="handleSearchbtn"
            :color="basic.theme || cfg.theme"
            plain
            >搜索</van-button
          >
        </div>
      </div>
      <!-- 组 -->
      <van-row class="group_wrap" gutter="10" v-if="groupList.length > 2">
        <van-col
          class="group_item"
          v-for="(item, index) in groupList"
          @click="handleGroup(item, index)"
          :key="index"
          :span="
            page.contestantListComponent.layout.groupColumnNum | groupColumn
          "
        >
          <div
            class="item"
            :class="{ active: currentGroup === index }"
            :style="{
              background:
                currentGroup === index ? basic.theme || cfg.theme : '',
            }"
          >
            {{ item.name }}
          </div>
        </van-col>
      </van-row>
      <!-- 选手列表 -->
      <div
        class="water_wrap"
        v-if="page.contestantListComponent.layout.arrangement == 'FLOW'"
      >
        <flow-one
          v-if="
            page.contestantListComponent.layout.contestantColumnNum == 'ONE'
          "
          :voteInfo="voteInfo"
          @handleChangeLoading="handleChangeLoading"
          @handleOneGoTo="handleOneGoTo"
          @handleOneVoteSingle="handleOneVoteSingle"
          :contestantIds="contestantIds"
          ref="flowOne"
        ></flow-one>
        <flow-two
          v-if="
            page.contestantListComponent.layout.contestantColumnNum == 'TWO'
          "
          :voteInfo="voteInfo"
          @handleChangeLoading="handleChangeLoading"
          @handleTwoGoTo="handleTwoGoTo"
          @handleTwoVoteSingle="handleTwoVoteSingle"
          :contestantIds="contestantIds"
          ref="flowTwo"
        ></flow-two>
        <flow-three
          v-if="
            page.contestantListComponent.layout.contestantColumnNum == 'THREE'
          "
          :voteInfo="voteInfo"
          @handleThreeGoTo="handleThreeGoTo"
          @handleThreeVoteSingle="handleThreeVoteSingle"
          :contestantIds="contestantIds"
          @handleChangeLoading="handleChangeLoading"
          ref="flowThree"
        ></flow-three>
      </div>
      <div
        class="player_wrap"
        v-if="page.contestantListComponent.layout.arrangement == 'ALIGN'"
      >
        <div
          :class="
            page.contestantListComponent.layout.contestantColumnNum
              | filterCLass
          "
          v-for="item in playerList"
          @click="handleGoTo(item)"
          :key="item.id"
        >
          <div
            class="player_img"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.COVER
            "
          >
            <van-image
              fit="cover"
              radius="4px"
              lazy-load
              :src="
                item.coverType === 'IMAGE' && item.coverLink
                  ? item.coverLink
                  : require('../../assets/images/cover.png')
              "
            />
            <div class="border" v-if="basic.contestantBorderStyleLink">
              <van-image :src="basic.contestantBorderStyleLink" />
            </div>
            <div
              class="number_wrap"
              :style="{
                background: basic.theme || 'rgba(0, 0, 0, 0.4)',
              }"
              v-if="
                page.contestantListComponent &&
                page.contestantListComponent.element.NUMBER
              "
            >
              {{ item.number }}
            </div>
          </div>
          <div class="player_info">
            <div
              class="vc"
              v-if="
                page.contestantListComponent &&
                page.contestantListComponent.element.VC
              "
            >
              {{ item.vc }}{{ voteInfo.unit }}
            </div>
            <div
              class="name"
              v-if="
                page.contestantListComponent &&
                page.contestantListComponent.element.NAME
              "
            >
              {{ item.name }}
            </div>
            <div
              class="introduction"
              v-if="
                page.contestantListComponent &&
                page.contestantListComponent.element.INTRODUCTION
              "
            >
              {{ item.introduction }}
            </div>
            <div
              v-if="
                page.contestantListComponent &&
                page.contestantListComponent.element.VOTING_BUTTON
              "
              @click.stop="handleVoteSingle(item)"
              class="type"
              :style="{
                background:
                  contestantIds.indexOf(item.id) == -1
                    ? basic.theme || cfg.theme
                    : '#999',
              }"
            >
              <span
                class="iconfont iconicon-test"
                v-if="contestantIds.indexOf(item.id) == -1"
              ></span>
              <span style="margin-left: 4px">{{
                contestantIds.indexOf(item.id) != -1 ? "已选择" : voteInfo.type
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="comment-list" v-if="commentList.length">
        <div class="title">最新评论</div>
        <div
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="item-left">
            <img :src="item.userPhotoLink" alt="" />
          </div>
          <div class="item-right">
            <div class="title_name">
              <span>{{ item.userNickname }}</span>
              给
              <span :style="{ color: basic.theme || cfg.theme }"
                >{{ item.contestantNumber }}号{{ item.contestantName }}</span
              >
              评论
            </div>
            <div class="details_ll">{{ item.content }}</div>
            <div class="detail_time">{{ item.createdTime }}</div>
          </div>
        </div>
      </div>
      <footer-logo></footer-logo>
    </van-list>
    <!-- 已选项 -->
    <div class="choice" v-if="contestantIds.length">
      <div class="choice_wrap">
        <div class="choice-left" v-if="rule.type == 'MULTIPLE_CHOICE'">
          已选<span :style="{ color: basic.theme || cfg.theme }">{{
            contestantIds.length
          }}</span
          >项 ，最少<span :style="{ color: basic.theme || cfg.theme }">{{
            rule.typeMultipleChoiceMinValue
          }}</span
          >项 ，最多<span :style="{ color: basic.theme || cfg.theme }">{{
            rule.typeMultipleChoiceMaxValue
          }}</span
          >项
        </div>
        <div class="choice-left" v-if="rule.type == 'REQUIRED_CHOICE'">
          已选<span :style="{ color: basic.theme || cfg.theme }">{{
            contestantIds.length
          }}</span
          >项 ，必须选择<span :style="{ color: basic.theme || cfg.theme }">{{
            rule.typeRequiredChoiceValue
          }}</span
          >项
        </div>
        <div
          @click="handleVote"
          :style="{
            background: basic.theme || cfg.theme,
          }"
          class="choice-right"
        >
          <span class="iconfont iconicon-test"></span>
          <span style="margin-left: 4px">{{ voteInfo.type }}</span>
        </div>
      </div>
    </div>
    <van-dialog
      v-model="showCode"
      title="提示"
      show-cancel-button
      :show-confirm-button="false"
    >
      <div ref="qrCodePng" id="qrCodePng">
        <vue-qr
          :text="QRcodeUrl"
          :margin="0"
          colorDark="#000"
          colorLight="#fff"
          :logoScale="0.3"
          :size="140"
        ></vue-qr>
        <span>请使用微信扫码后操作</span>
      </div>
    </van-dialog>
    <van-dialog
      v-model="showVerfyCode"
      title="验证码"
      :confirm-button-text="voteInfo.type"
      show-cancel-button
      @confirm="handleConfirm"
      @close="codeImage.code = ''"
    >
      <div class="verfyCode_wrap">
        <div class="input">
          <van-field
            maxlength="4"
            v-model="codeImage.code"
            placeholder="请输入验证码"
            :error-message="codeImage.errorCode"
          />
        </div>
        <div class="img">
          <img :src="codeImage.url" alt="" />
        </div>
      </div>
    </van-dialog>
    <van-dialog
      v-model="showWeChatCode"
      title="提示"
      show-cancel-button
      :show-confirm-button="false"
      cancelButtonText="关闭"
      @close="handleClose"
    >
      <div id="qrWeChatCode">
        <img style="width: 140px; height: 140px" :src="wechatCodeQR" alt="" />
        <span>请先扫码关注公众号后操作</span>
      </div>
    </van-dialog>
    <van-dialog
      v-model="votedConfig.showVoted"
      :title="votedConfig.votedText"
      show-cancel-button
      cancelButtonText="关闭"
      confirmButtonText="去看看"
      @close="handleCloseVoted"
      @confirm="handleConfirmVoted"
      className="votedLink"
    >
      <div>
        <div v-if="votedConfig.tips" class="votedTips">
          {{ votedConfig.tips }}
        </div>
        <div class="link_wrap" v-if="ad.votingLink">
          <van-image fit="cover" :src="ad.votingLink.link" />
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import footerLogo from "@/components/footerLogo";
import flowOne from "./components/flow/one";
import flowTwo from "./components/flow/two";
import flowThree from "./components/flow/three";
import { LgetItem, LsetItem } from "@/utils/storage";
import cfg from "@/config";
import { isWeiXin } from "@/utils/index";
import vueQr from "vue-qr";
import { formatDate } from "@/filter";
import axios from "axios";
import { wx, wxInit } from "@/utils/jssdkInit";
export default {
  components: {
    footerLogo,
    flowOne,
    flowTwo,
    flowThree,
    vueQr,
  },
  data() {
    return {
      showCode: false,
      QRcodeUrl: "",
      voteInfo: {},
      time: null,
      contestantCountList: [],
      countCol: 0,
      playerList: [],
      groupList: [],
      group: ["aa", "bb", "cc", "dd"],
      query: {
        hidden: null, //null代表全部，true代表隐藏，false代表显示
        introduction: "", //根据选手简介搜索
        contestantGroupId: "",
        name: "", //根据选手名称搜索
        number: "", //根据选手编号搜索
        order: "", //NUMBER_ASC表示编号正序,NUMBER_DESC表示编号倒序，VC_ASC表示票数正序，VC_DESC表示票数倒序
        pageNum: 1,
        pageSize: 10,
        propery: "", //COVER_LINK_NONE表示封面无连接,COVER_LINK表示封面有链接，ENABLED表示禁用的选手，INTRODUCTION_NONE表示无简要介绍，INTRODUCTION表示有简要介绍，DETAILS_NONE表示无详细介绍，DETAILS表示有详细介绍
        voteId: LgetItem("voteId"),
      },
      listConfig: {
        loading: false,
        finished: false,
        error: false,
      },
      currentGroup: 0,
      voteId: LgetItem("voteId"),
      cfg,
      contestantIds: [],
      showVerfyCode: false,
      codeImage: {
        url: "",
        logicId: "",
        code: "",
        errorCode: "",
      },
      showWeChatCode: false,
      wechatCodeQR: `${cfg.host}${
        cfg.baseUrl
      }/wx/qr-code/get-q-r-code?voteId=${LgetItem("voteId")}`,
      current: {},
      authFollowed: false,
      votedConfig: {
        showVoted: false,
        votedText: "投票成功",
        tips: "",
      },
      commentList: [],
      key: "",
    };
  },
  filters: {
    groupColumn(val) {
      let num = 0;
      switch (val) {
        case "ONE":
          num = 24;
          break;
        case "TWO":
          num = 12;
          break;
        case "THREE":
          num = 8;
          break;
        case "FOUR":
          num = 6;
          break;
        default:
          break;
      }
      return num;
    },
    filterCLass(val) {
      let obj = {};
      switch (val) {
        case "ONE":
          obj["player_item_ONE"] = true;
          break;
        case "TWO":
          obj["player_item_TWO"] = true;
          break;
        case "THREE":
          obj["player_item_THREE"] = true;
          break;
        default:
          break;
      }
      return obj;
    },
  },
  computed: {
    ...mapGetters("configs", {
      basic: "basic",
      ad: "ad",
      page: "page",
      rule: "rule",
      wechat: "wechat",
      security: "security",
      commentary: "commentary",
      tabbar: "tabbar",
      share: "share",
    }),
    ...mapGetters("status", {
      searchKey: "searchKey",
    }),
  },
  watch: {
    searchKey(val) {
      console.log(val, "val");
      this.key = val;
      this.query.introduction = val;
      this.query.number = Number(val) ? Number(val) : val;
      this.query.name = val;
      this.query.pageNum = 1;
      this.playerList = [];
      this.getPlayerList();
    },
  },
  created() {
    this.isAuth();
    let search = this.$store.state.status.searchKey.trim();
    if (search) {
      this.key = search;
      this.query.introduction = search;
      this.query.number = Number(search) ? Number(search) : search;
      this.query.name = search;
      this.query.pageNum = 1;
      this.playerList = [];
      this.getPlayerList();
    } else {
      this.getPlayerList();
    }
    if (this.commentary.enabled && this.commentary.showHomePageEnabled) {
      this.$api("player.commentHome", {
        voteId: this.voteId,
      }).then((res) => {
        this.commentList = res;
      });
    }
  },
  mounted() {
    this.getVoteInfo();
    this.contestantCountListComponent();
    this.getGroupList();
    this.shareFn(this.share);
  },
  destroyed() {
    this.$store.commit("status/SET_SEARCHKEY", "");
  },
  methods: {
    shareFn(share) {
      // console.log(share,'vote')
      this.$nextTick(() => {
        wxInit()
          .then(() => {
            console.log(share, "voteshare");
            wx.updateAppMessageShareData({
              //分享到朋友
              title: share.title, // 分享标题
              desc: share.context, // 分享描述
              link:
                window.location.href.indexOf("?") != -1
                  ? window.location.href
                  : `${window.location.href}?id=${LgetItem("voteId")}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: share.imageLink ? share.imageLink : cfg.shareImg, // 分享图标
              success: () => {
                console.log("分享成功");
              },
            });
            wx.updateTimelineShareData({
              //分享到朋友圈
              title: share.title, // 分享标题
              link:
                window.location.href.indexOf("?") != -1
                  ? window.location.href
                  : `${window.location.href}?id=${LgetItem("voteId")}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: share.imageLink ? share.imageLink : cfg.shareImg, // 分享图标
              success: function () {
                console.log("分享成功");
              },
            });
          })
          .catch((err) => {
            console.log(err, "err");
          });
        //   toast.clear();
      });
    },
    getVoteInfo() {
      this.$api("vote.getVoteInfo", {
        id: this.voteId,
      }).then((res) => {
        this.voteInfo = res;
        let time = new Date(res.endTime).getTime() - new Date().getTime();
        if (res.enabled) {
          this.time = time > 0 ? time : 0;
        } else {
          this.time = 0;
        }
      });
    },
    //统计
    contestantCountListComponent() {
      this.$api("page.contestantCountListComponent").then((res) => {
        let arr = [];
        res.forEach((item) => {
          if (this.page.countComponent.element[item.value]) {
            arr.push(item);
          }
        });
        this.contestantCountList = arr;
        switch (this.contestantCountList.length) {
          case 1:
            this.countCol = 24;
            break;
          case 2:
            this.countCol = 12;
            break;
          case 3:
            this.countCol = 8;
            break;
          default: {
            this.countCol = 0;
            break;
          }
        }
      });
    },
    getGroupList() {
      this.$api("player.getGroupList", {
        voteId: this.voteId,
      }).then((res) => {
        console.log(res);
        this.groupList = res;
        this.groupList.unshift({ name: "全部", id: "" });
      });
    },
    getPlayerList() {
      console.log(1);
      this.query.order =
        this.page.contestantListComponent.layout.sort == "TIME_DESC"
          ? ""
          : this.page.contestantListComponent.layout.sort;
      this.$api("player.getPlayerList", this.query)
        .then((res) => {
          if (res.count < 10) {
            this.listConfig.finished = true;
          } else {
            this.listConfig.finished = false;
          }
          if (this.page.contestantListComponent.layout.arrangement == "FLOW") {
            this.playerList = res.data;
            if (
              this.page.contestantListComponent.layout.contestantColumnNum ==
              "ONE"
            ) {
              if (this.key) {
                this.$refs.flowOne.clearList();
              }
              this.$refs.flowOne.recievePlayerList(this.playerList);
            } else if (
              this.page.contestantListComponent.layout.contestantColumnNum ==
              "TWO"
            ) {
              if (this.key) {
                this.$refs.flowTwo.clearList();
              }
              this.$refs.flowTwo.recievePlayerList(this.playerList);
            } else if (
              this.page.contestantListComponent.layout.contestantColumnNum ==
              "THREE"
            ) {
              if (this.key) {
                this.$refs.flowThree.clearList();
              }
              this.$refs.flowThree.recievePlayerList(this.playerList);
            }
          } else {
            this.playerList.push(...res.data);
            this.listConfig.loading = false;
          }

          if (res.data.length < 10) {
            this.listConfig.finished = true;
          }
        })
        .catch(() => {
          this.listConfig.loading = false;
          this.listConfig.error = true;
        });
    },
    getList() {
      this.query.pageNum++;
      //  加一个定时器，解决下拉加载更多的时候页面回跳到顶部，并没有保持在当前页面滚动条距离
      // 不知道为什么，加了定时器就可以了
      setTimeout(() => {
        this.getPlayerList();
      }, 100);
    },
    handleGroup(item, index) {
      console.log(item);
      this.currentGroup = index;
      console.log(item);
      this.query.contestantGroupId = item.id;
      this.query.pageNum = 0;
      this.listConfig.finished = false;
      this.playerList = [];
    },
    handleSearch() {
      this.searchApi();
    },
    handleSearchbtn() {
      this.searchApi();
    },
    handleClear() {
      this.searchApi();
    },
    searchApi() {
      this.query.introduction = this.key;
      this.query.number = this.key;
      this.query.name = this.key;
      this.query.pageNum = 1;
      // this.listConfig.finished = false;
      // this.listConfig.loading = false;
      this.playerList = [];
      this.getPlayerList();
    },
    handleGoTo(item) {
      if (this.page.contestantListComponent.element.DETAIL_LINK) {
        console.log(item);
        //进入选手详情之前需要收集该选手的访问记录
        LsetItem("cid", item.id);
        axios
          .get(
            `/vote/statistic/visit/report/${LgetItem("voteId")}/${LgetItem(
              "cid"
            )}`
          )
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
        this.$router.push({
          path: "/detail",
          query: {
            playerId: item.id,
          },
        });
      }
    },
    handleTwoGoTo(item) {
      this.handleGoTo(item);
    },
    handleThreeGoTo(item) {
      this.handleGoTo(item);
    },
    handleOneGoTo(item) {
      this.handleGoTo(item);
    },
    handleChangeLoading(bool) {
      this.listConfig.loading = bool;
    },
    handleVoteSingle(item) {
      this.current = item;
      console.log(item);
      /**
       * 点击投票
       * 1.防刷票可以开启投票时间段，只能在这个时间段内投票
       * 2.判断是单选还是多选，还是必选，如果是单选直接判断微信环境，否则将已选项存起来，页面展示已选项choice
       * 3.防刷票，是否需要验证码
       * 4.投票成功
       *
       */
      // 点击投票之前要判断当前是单选，多选还是必选
      // 再判断是微信环境

      //是否开启时间段内投票
      if (this.security.limitDailyVotingTimeEnabled) {
        //当前时间是否在时间段内
        let limitBegin = new Date(
          formatDate(new Date(), "YYYY-MM-DD") +
            " " +
            this.security.limitDailyVotingTimeOnBeginValue
        ).getTime();
        let limitEnd = new Date(
          formatDate(new Date(), "YYYY-MM-DD") +
            " " +
            this.security.limitDailyVotingTimeOnEndValue
        ).getTime();
        let now = new Date().getTime();
        if (now >= limitBegin && now <= limitEnd) {
          if (this.rule.type == "SINGLE_CHOICE") {
            if (isWeiXin()) {
              //是否需要关注公众号才能投票、
              if (this.rule.followedVoting) {
                console.log("开启了关注公众号");
                //判断当前微信号是否已经关注了关注
                if (this.authFollowed) {
                  console.log("已经关注了关注");
                  //防刷票设置，是否需要验证码
                  if (this.security.verificationCodeEnabled) {
                    console.log("需要验证码");
                    this.getVerfyCode();
                  } else {
                    let query = {
                      code: "",
                      contestantIds: [item.id],
                      logicId: "",
                    };
                    this.submitVote(query);
                  }
                } else {
                  //弹出公众号二维码让用户去关注
                  console.log("弹出公众号二维码让女用户管住");
                  this.showWeChatCode = true;
                }
              } else {
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: [item.id],
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              }
            } else {
              //弹出活动二维码
              this.getVoteCoQR();
            }
          } else {
            //判断contestantIds是否已经有当前选手了,有移除，无添加
            let index = this.contestantIds.indexOf(item.id);
            if (index != -1) {
              this.contestantIds.splice(index, 1);
            } else {
              if (this.rule.type == "MULTIPLE_CHOICE") {
                // typeMultipleChoiceMinValue;
                // typeMultipleChoiceMaxValue;
                if (
                  this.contestantIds.length >=
                  this.rule.typeMultipleChoiceMaxValue
                ) {
                  this.$toast(
                    `最多可选择${this.rule.typeMultipleChoiceMaxValue}项`
                  );
                } else {
                  this.contestantIds.push(item.id);
                }
              }
              if (this.rule.type == "REQUIRED_CHOICE") {
                if (
                  this.contestantIds.length >= this.rule.typeRequiredChoiceValue
                ) {
                  this.$toast(
                    `最多可选择${this.rule.typeRequiredChoiceValue}项`
                  );
                } else {
                  this.contestantIds.push(item.id);
                }
              }
            }
          }
        } else {
          //提示用户该时间段内不可投票
          this.$toast(`当前时间不可${this.voteInfo.type}`);
        }
      } else {
        if (this.rule.type == "SINGLE_CHOICE") {
          if (isWeiXin()) {
            //是否需要关注公众号才能投票、
            if (this.rule.followedVoting) {
              console.log("开启了关注公众号");
              //判断当前微信号是否已经关注了关注
              if (this.authFollowed) {
                console.log("已经关注了关注");
                //防刷票设置，是否需要验证码
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: [item.id],
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              } else {
                //弹出公众号二维码让用户去关注
                console.log("弹出公众号二维码让女用户管住");
                this.showWeChatCode = true;
              }
            } else {
              if (this.security.verificationCodeEnabled) {
                console.log("需要验证码");
                this.getVerfyCode();
              } else {
                let query = {
                  code: "",
                  contestantIds: [item.id],
                  logicId: "",
                };
                this.submitVote(query);
              }
            }
          } else {
            //弹出活动二维码
            this.getVoteCoQR();
          }
        } else {
          //判断contestantIds是否已经有当前选手了,有移除，无添加
          let index = this.contestantIds.indexOf(item.id);
          if (index != -1) {
            this.contestantIds.splice(index, 1);
          } else {
            if (this.rule.type == "MULTIPLE_CHOICE") {
              // typeMultipleChoiceMinValue;
              // typeMultipleChoiceMaxValue;
              if (
                this.contestantIds.length >=
                this.rule.typeMultipleChoiceMaxValue
              ) {
                this.$toast(
                  `最多可选择${this.rule.typeMultipleChoiceMaxValue}项`
                );
              } else {
                this.contestantIds.push(item.id);
              }
            }
            if (this.rule.type == "REQUIRED_CHOICE") {
              if (
                this.contestantIds.length >= this.rule.typeRequiredChoiceValue
              ) {
                this.$toast(`最多可选择${this.rule.typeRequiredChoiceValue}项`);
              } else {
                this.contestantIds.push(item.id);
              }
            }
          }
        }
      }
    },
    handleTwoVoteSingle(item) {
      this.handleVoteSingle(item);
    },
    handleThreeVoteSingle(item) {
      this.handleVoteSingle(item);
    },
    handleOneVoteSingle(item) {
      this.handleVoteSingle(item);
    },
    handleCloseVoted() {},
    handleConfirmVoted() {
      this.votedConfig.showVoted = false;
      window.location.href = this.ad.votingLink.targetLink;
    },
    handleVote() {
      //既然能够显示已选项，就不用考虑时间范围了
      console.log(this.contestantIds);
      //需要考虑已选项是否符合规则
      if (this.rule.type == "MULTIPLE_CHOICE") {
        if (this.contestantIds.length >= this.rule.typeMultipleChoiceMinValue) {
          if (isWeiXin()) {
            //是否需要关注公众号才能投票、
            if (this.rule.followedVoting) {
              console.log("开启了关注公众号");
              //判断当前微信号是否已经关注了关注
              if (this.authFollowed) {
                console.log("已经关注了关注");
                //防刷票设置，是否需要验证码
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: this.contestantIds,
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              } else {
                //弹出公众号二维码让用户去关注
                console.log("弹出公众号二维码让女用户管住");
                this.showWeChatCode = true;
              }
            } else {
              if (this.security.verificationCodeEnabled) {
                console.log("需要验证码");
                this.getVerfyCode();
              } else {
                let query = {
                  code: "",
                  contestantIds: this.contestantIds,
                  logicId: "",
                };
                this.submitVote(query);
              }
            }
          } else {
            //弹出活动二维码
            this.getVoteCoQR();
          }
        } else {
          console.log(111);
          this.$toast(`最少${this.rule.typeMultipleChoiceMinValue}项`);
        }
      }
      if (this.rule.type == "REQUIRED_CHOICE") {
        if (this.contestantIds.length == this.rule.typeRequiredChoiceValue) {
          if (isWeiXin()) {
            //是否需要关注公众号才能投票、
            if (this.rule.followedVoting) {
              console.log("开启了关注公众号");
              //判断当前微信号是否已经关注了关注
              if (this.authFollowed) {
                console.log("已经关注了关注");
                //防刷票设置，是否需要验证码
                if (this.security.verificationCodeEnabled) {
                  console.log("需要验证码");
                  this.getVerfyCode();
                } else {
                  let query = {
                    code: "",
                    contestantIds: this.contestantIds,
                    logicId: "",
                  };
                  this.submitVote(query);
                }
              } else {
                //弹出公众号二维码让用户去关注
                console.log("弹出公众号二维码让女用户管住");
                this.showWeChatCode = true;
              }
            } else {
              if (this.security.verificationCodeEnabled) {
                console.log("需要验证码");
                this.getVerfyCode();
              } else {
                let query = {
                  code: "",
                  contestantIds: this.contestantIds,
                  logicId: "",
                };
                this.submitVote(query);
              }
            }
          } else {
            //弹出活动二维码
            this.getVoteCoQR();
          }
        } else {
          console.log(222);
          this.$toast(`必须选择${this.rule.typeRequiredChoiceValue}项`);
        }
      }
    },
    handleClose() {
      this.isAuth();
    },
    //是否关注公众号
    isAuth() {
      this.$api("sign.isAuth").then((res) => {
        this.authFollowed = res;
      });
    },
    //获取验证码
    getVerfyCode() {
      this.$api("vote.getVerfycode").then((res) => {
        this.codeImage.url = res.data;
        this.codeImage.logicId = res.logicId;
        this.showVerfyCode = true;
      });
    },
    //活动二维码
    getVoteCoQR() {
      this.$api("vote.getqrcode", {
        id: this.voteId,
      }).then((res) => {
        this.QRcodeUrl = res;
        this.showCode = true;
      });
    },
    //提交投票
    submitVote(query) {
      this.$api("vote.submitVote", {
        // code: "",
        // contestantIds: arr,
        // logicId: "",
        ...query,
        voteId: this.voteId,
      })
        .then((res) => {
          console.log(res);
          //投票成功之后，判断是否有投票提示广告
          if (this.ad.votingLinkEnabled) {
            this.votedConfig.showVoted = true;
            this.votedConfig.votedText = `${this.voteInfo.type}成功`;
          } else {
            // this.$toast(`${this.voteInfo.type}成功`);
            this.$notify({
              type: "success",
              message: `${this.voteInfo.type}成功`,
            });
          }
          this.contestantIds = [];
          //刷新选手列表
          if (this.page.contestantListComponent.layout.arrangement == "FLOW") {
            if (
              this.page.contestantListComponent.layout.contestantColumnNum ==
              "ONE"
            ) {
              query.contestantIds.forEach((item1) => {
                this.$refs.flowOne.list1.forEach((item2) => {
                  if (item1 == item2.id) {
                    item2.vc += 1;
                  }
                });
              });
            } else if (
              this.page.contestantListComponent.layout.contestantColumnNum ==
              "TWO"
            ) {
              query.contestantIds.forEach((item1) => {
                this.$refs.flowTwo.dataList1.forEach((item2) => {
                  if (item1 == item2.id) {
                    item2.vc += 1;
                  }
                });
                this.$refs.flowTwo.dataList2.forEach((item2) => {
                  if (item1 == item2.id) {
                    item2.vc += 1;
                  }
                });
              });
            } else if (
              this.page.contestantListComponent.layout.contestantColumnNum ==
              "THREE"
            ) {
              query.contestantIds.forEach((item1) => {
                this.$refs.flowThree.dataList1.forEach((item2) => {
                  if (item1 == item2.id) {
                    item2.vc += 1;
                  }
                });
                this.$refs.flowThree.dataList2.forEach((item2) => {
                  if (item1 == item2.id) {
                    item2.vc += 1;
                  }
                });
                this.$refs.flowThree.dataList3.forEach((item2) => {
                  if (item1 == item2.id) {
                    item2.vc += 1;
                  }
                });
              });
            }
          } else {
            query.contestantIds.forEach((item1) => {
              this.playerList.forEach((item2) => {
                if (item1 == item2.id) {
                  item2.vc += 1;
                }
              });
            });
          }
          this.getVoteInfo();
        })
        .catch((err) => {
          console.log(err);
          if (this.ad.votingLinkEnabled) {
            this.votedConfig.showVoted = true;
            this.votedConfig.votedText = `${this.voteInfo.type}失败`;
            this.votedConfig.tips = err.desc;
          } else {
            this.$notify({
              type: "danger",
              message: err.desc,
            });
          }

          this.contestantIds = [];
        });
    },
    //输入验证码点击确定提交投票
    handleConfirm() {
      if (this.codeImage.code && this.codeImage.code.length < 4) {
        this.codeImage.errorCode = "请输入4位验证码";
      } else if (!this.codeImage.code) {
        this.codeImage.errorCode = "请输入验证码";
      } else {
        if (this.rule.type == "SINGLE_CHOICE") {
          let query = {
            code: this.codeImage.code,
            contestantIds: [this.current.id],
            logicId: this.codeImage.logicId,
          };
          this.submitVote(query);
        } else {
          let query = {
            code: this.codeImage.code,
            contestantIds: this.contestantIds,
            logicId: this.codeImage.logicId,
          };
          this.submitVote(query);
        }
      }
    },
    handleTo() {
      console.log(this.tabbar);
      let item = this.tabbar.find((item) => item.link == "/ranking");
      if (item) {
        this.$router.push({
          path: "/ranking",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.vote_wrap {
  width: 100%;
  min-height: 100vh;
  position: relative;
  .choice {
    position: fixed;
    bottom: calc(50px + constant(safe-area-inset-bottom));
    bottom: calc(50px + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
    .choice_wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      padding: 0 10px;
      box-sizing: border-box;
      width: 100%;
      height: 42px;
      .choice-left {
        font-size: 12px;
        color: #797979;
      }
      .choice-right {
        font-size: 14px;
        color: #fff;
        padding: 5px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
      }
    }
  }
  .banner_wrap {
    .banner_item {
      font-size: 0;
      ::v-deep.van-image {
        width: 100%;
        height: 200px;
      }
    }
  }
  .vote_info_wrap {
    margin: 15px 10px 0;
    background: #fff;
    border-radius: 4px;
    padding: 15px 0;
    box-shadow: 0 0 5px #f4f4f4;
    .info_title {
      text-align: center;
      line-height: 30px;
      font-size: 18px;
    }
    .count_wrap {
      margin-top: 15px;
      display: flex;

      .count_item {
        flex: 1;
        &:first-child {
          border: none !important;
        }
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .num {
          font-size: 18px;
        }
        .name {
          font-size: 13px;
          margin-top: 5px;
          color: #333;
        }
      }
    }
    .time_wrap {
      margin: 20px 10px 0;
      height: 80px;
      display: flex;
      .time_box {
        flex: 1;
        background-image: url("../../assets/images/homebg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .time_title {
          font-size: 18px;
          text-align: center;
          margin-top: 15px;
          letter-spacing: 6px;
        }
        .time_details {
          margin-top: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          .num {
            color: #fff;
            font-size: 15px;
            padding: 4px 6px;
            border-radius: 2px;
          }
          .text {
            font-size: 13px;
            padding: 4px 6px;
          }
        }
      }
      .logo_count {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        ::v-deep.van-image {
          font-size: 0;
          width: 50px;
          height: auto;
        }
      }
    }
  }
  .vote_info_wrap {

    .regular_title {
      text-align: center;
      line-height: 30px;
      font-size: 18px;
    }
    .regular_item {
      width: 100%;
      line-height: 20px;
      font-size: 13px;
      font-weight: 400;
      color: #666;
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 4px;
      padding: 0 10px;
      span{
        margin-left: 6px;
      }
    }
  }
  .search_wrap {
    margin-top: 5px;
    background: #fff;
    margin: 0 10px;
    margin-top: 10px;
    border-radius: 4px;
    padding-right: 5px;
    border: 1px solid #f1f1f1;
    .search {
      display: flex;
      align-items: center;
      ::v-deep.van-search {
        flex: 1;
      }
      ::v-deep.van-button {
        border-radius: 20px;
        padding: 0 20px;
        height: 34px;
      }
    }
  }
  .group_wrap {
    background-color: #fff;
    padding: 0 5px 15px;
    margin: 0 10px;
    border-radius: 4px;
    margin-top: 10px;
    .group_item {
      margin-top: 15px;
      .item {
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        height: 35px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        &.active {
          color: #fff;
        }
      }
    }
  }

  .player_wrap {
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    margin: 0 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    .player_info {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .vc {
        font-size: 14px;
        color: #4a4a4a;
      }
      .name {
        font-size: 14px;
        color: #4a4a4a;
        margin-top: 6px;
      }
      .introduction {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 0 10px;
        line-height: 18px;
      }
      .type {
        margin-top: 10px;
        font-size: 14px;
        // color: #fff;
        padding: 5px 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        border: 1px solid #f1f1f1;
      }
    }

    .player_item_ONE {
      width: 100%;
      display: flex;
      background-color: #fff;
      border-radius: 4px;
      margin-top: 8px;
      &:first-child {
        margin-top: 0;
      }
      .player_img {
        flex: 1;
        position: relative;
        height: 200px;
        .border {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          ::v-deep.van-image {
            width: 100%;
            height: 100%;
          }
        }
        ::v-deep.van-image {
          width: 100%;
          height: 100%;
        }
        .number_wrap {
          position: absolute;
          left: 5px;
          top: 0;
          width: 30px;
          height: 35px;
          background-color: rgba(0, 0, 0, 0.4);
          font-size: 14px;
          color: #fff;
          text-align: center;
          line-height: 35px;
          border-bottom-right-radius: 50%;
          border-bottom-left-radius: 50%;
        }
      }
      .player_info {
        flex: 1;
        height: 200px;
      }
    }
    .player_item_TWO {
      margin-top: 8px;
      padding-bottom: 10px;
      width: calc(50% - 4px);
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      background-color: #fff;
      &:first-child {
        margin-top: 0;
      }
      &:nth-child(2) {
        margin-top: 0;
      }

      &:nth-child(2n) {
        margin-left: 8px;
      }
      .player_img {
        position: relative;
        height: 200px;
        ::v-deep.van-image {
          width: 100%;
          height: 100%;
          font-size: 0;
        }
        .border {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          ::v-deep.van-image {
            width: 100%;
            height: 100%;
            font-size: 0;
          }
        }
        .number_wrap {
          position: absolute;
          left: 5px;
          top: 0;
          width: 30px;
          height: 35px;
          background-color: rgba(0, 0, 0, 0.4);
          font-size: 14px;
          color: #fff;
          text-align: center;
          line-height: 35px;
          border-bottom-right-radius: 50%;
          border-bottom-left-radius: 50%;
        }
      }
      .player_info {
        margin-top: 10px;
      }
    }
    .player_item_THREE {
      margin-top: 8px;
      padding-bottom: 10px;
      width: calc(33.333% - 4px);
      display: flex;
      border-radius: 4px;
      flex-direction: column;
      background-color: #fff;
      &:not(:nth-child(3n + 1)) {
        margin-left: 6px;
      }
      &:first-child {
        margin-top: 0;
      }
      &:nth-child(2) {
        margin-top: 0;
      }
      &:nth-child(3) {
        margin-top: 0;
      }
      .player_img {
        position: relative;

        .border {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          ::v-deep.van-image {
            width: 100%;
            height: 100%;
          }
        }
        ::v-deep.van-image {
          width: 100%;
          height: 128px;
        }
        .number_wrap {
          position: absolute;
          left: 5px;
          top: 0;
          width: 30px;
          height: 35px;
          background-color: rgba(0, 0, 0, 0.4);
          font-size: 14px;
          color: #fff;
          text-align: center;
          line-height: 35px;
          border-bottom-right-radius: 50%;
          border-bottom-left-radius: 50%;
        }
      }
      .player_info {
        margin-top: 10px;
      }
    }
  }
  .water_wrap {
    background-color: #f5f5f5;
    margin: 0 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border-radius: 4px;
    ::v-deep.van-col {
      min-height: 0;
    }
  }
  ::v-deep.van-list__finished-text {
    color: #fff;
  }
  #qrCodePng {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    flex-direction: column;
    span {
      margin-top: 15px;
      color: #999;
      font-size: 12px;
    }
  }
  #qrWeChatCode {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    flex-direction: column;
    span {
      margin-top: 15px;
      color: #999;
      font-size: 12px;
    }
  }
  .verfyCode_wrap {
    padding: 20px 0;
    display: flex;
    align-items: center;
    .input {
      flex: 1;
    }
    .img {
      flex: 1;
      text-align: center;
      img {
        width: 100px;
        height: 44px;
      }
    }
  }
  .votedLink {
    ::v-deep.van-dialog__header {
      color: #fb4723;
    }
    .votedTips {
      font-size: 12px;
      color: #999;
      text-align: center;
      line-height: 22px;
    }
    .link_wrap {
      width: 100%;
      height: 250px;
      font-size: 0;
      margin-top: 8px;
    }
    ::v-deep.van-image {
      width: 100%;
      height: 100%;
    }
  }
  .comment-list {
    margin: 10px;
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    .title {
      font-size: 15px;
      line-height: 30px;
    }
    .comment-item {
      display: flex;
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 10px;
      margin-top: 10px;
      .item-left {
        flex: 0 0 30px;
        img {
          width: 100%;
          height: 30px;
        }
      }
      .item-right {
        flex: 1;
        padding-left: 10px;
        word-break: break-all;
        .title_name {
          font-size: 14px;
        }
        .details_ll {
          padding: 5px 0;
          font-size: 13px;
          line-height: 20px;
        }
        .detail_time {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>